<template>    
<Select 
    v-model="value"
    style="width: 100%"
    @change="onChange">
    <template v-if="code">
      <Option
        v-for="item in dicData"
        :key="item.id"
        :value="item.code"
      >{{item.value}}</Option>
    </template>
    <template v-else>
      <Option
        v-for="(val, key) in dicData"
        :key="key"
        :value="Number(key)"
      >{{val}}</Option>
    </template>
</Select>
  </template>
  
  <script>
  import api from "@/api/commonApi";
export default {
  name: "DicSelect",
  props: {
    modelValue: {
      type: [Array, String, Number],
      default: "",
    },
    code: {
      type: String,
      default: "",
    },
    data: {
      type: Object,
      default: [],
    },
    // 是否默认选中第一个选项
    // autoSelectFirst: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  data() {
    return {
      dicData: [],
    };
  },
  mounted() {
    // const emit = defineEmits(["update:modelValue", "change"]);
    // const value = useVModel(this, "modelValue", emit);
    if (this.code) {
      getData();
    } else {
      dicData = this.data;
    }
    // if (this.autoSelectFirst) {
    // }
  },
  methods: {
    async getData() {
      this.$axios.post(api.findParentType, {code:this.code}).then((res) => {
        if (res.data.code === 1) {
            this.dicData = res.data;
        } else {
          this.dicData = [];
          this.$Message.info(res.data.message);
        }
      });
    },
    onChange(value) {
       this.$emit("change", value);
    },
  },
};
</script>
  
  <style lang="less" scoped>
.IconMask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1111;
  background-color: rgba(0, 0, 0, 0.2);
  .PerMask-com {
    width: 500px;
    height: 666px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 1);
    box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.35);
    border-radius: 5px;
    .com-right {
      width: 98%;
      height: calc(100% - 45px);
      margin: auto;
      font-size: 14px;
      color: #242526;
      border: 1px solid #eaeaea;
      .com-left-one {
        width: 100%;
        height: calc(100% - 110px);
        overflow: auto;
        .com-left-zhu {
          width: 440px;
          margin: auto;
          margin-top: 5px;
          .com-left-zhu-tle,
          .com-left-zhu-com {
            width: 100%;
            margin: 0;
            font-size: 12px;
            line-height: 20px;
          }
        }
      }
      .com-left-two {
        width: 100%;
        height: calc(100% - 81px);
        overflow: auto;
      }
      .com-left-one::-webkit-scrollbar,
      .com-left-two::-webkit-scrollbar {
        height: 0px;
        width: 0px;
      }
    }
  }
}
</style>
